<ng-container *ngIf="usDefaultLayout; else routerOutlet">
  <ngx-loading-bar [color]="'#fafafa'"></ngx-loading-bar>
  <mat-toolbar color="primary" class="mat-elevation-z6 app-navbar" [class.navbar-small]="isSmallDevice$ | async">
    <a
      mat-button
      routerLink=""
      routerLinkActive=""
      #homeLink="routerLinkActive"
      [routerLinkActiveOptions]="{ exact: true }"
    >
      <span class="d-flex align-items-center">
        <img alt="Home" src="https://raw.githubusercontent.com/ngx-formly/ngx-formly/v5/logo.svg?sanitize=true" />
        FORMLY
      </span>
    </a>

    <ng-container *ngIf="isSmallDevice$ | async; else mainMenu">
      <span class="spacer" [style.flex]="'1 1 auto'"></span>
      <ng-container *ngTemplateOutlet="version"></ng-container>
      <a mat-button href="https://github.com/ngx-formly/ngx-formly">
        <img alt="GitHub" src="https://material.angular.io/assets/img/homepage/github-circle-white-transparent.svg" />
      </a>
      <button mat-button (click)="sidenav.toggle()">
        <mat-icon>menu</mat-icon>
      </button>
    </ng-container>
    <ng-template #mainMenu>
      <a *ngFor="let link of menu" mat-button [routerLink]="link.path">{{ link.label }}</a>
      <span class="spacer" [style.flex]="'1 1 auto'"></span>

      <ng-container *ngTemplateOutlet="version"></ng-container>
      <a mat-button href="https://github.com/ngx-formly/ngx-formly">
        <span class="d-flex align-items-center">
          <img alt="GitHub" src="https://material.angular.io/assets/img/homepage/github-circle-white-transparent.svg" />
          GitHub
        </span>
      </a>
    </ng-template>
  </mat-toolbar>

  <mat-sidenav-container fullscreen [style.top]="'56px'" class="mat-typography">
    <mat-sidenav
      [mode]="(isSmallDevice$ | async) ? 'over' : 'side'"
      [opened]="!homeLink.isActive && (isSmallDevice$ | async) === false"
      [style.width.px]="250"
      #sidenav
    >
      <ng-container *ngFor="let link of menu">
        <a
          mat-button
          class="menu-item"
          [routerLink]="link.path"
          routerLinkActive="active-link"
          #routerLink="routerLinkActive"
        >
          <span class="d-flex align-items-center">
            {{ link.label }}
            <span class="spacer" [style.flex]="'1 1 auto'"></span>
            <mat-icon>{{ routerLink.isActive ? 'keyboard_arrow_down' : 'keyboard_arrow_right' }}</mat-icon>
          </span>
        </a>
        <ng-container *ngIf="routerLink.isActive">
          <ng-template [ngTemplateOutlet]="sideMenuItem" [ngTemplateOutletContext]="{ items: link.items }">
          </ng-template>
        </ng-container>
      </ng-container>
    </mat-sidenav>

    <div style="min-height: 80vh">
      <router-outlet></router-outlet>
    </div>

    <footer class="text-muted text-muted pt-3 pt-md-5" [class.container]="homeLink.isActive">
      <a
        mat-button
        routerLink=""
        routerLinkActive=""
        #homeLink="routerLinkActive"
        [routerLinkActiveOptions]="{ exact: true }"
      >
        <span class="bd-footer-logo">
          <img
            width="60"
            alt="Home"
            src="https://raw.githubusercontent.com/ngx-formly/ngx-formly/v5/logo.svg?sanitize=true"
          />
          <span class="bd-footer-logo-text"> FORMLY </span>
        </span>
      </a>
      <div>
        <ul class="bd-footer-links">
          <li><a target="_blank" href="https://github.com/ngx-formly/ngx-formly">GitHub</a></li>
          <li><a target="_blank" href="https://twitter.com/formlydev">Twitter</a></li>
          <li><a routerLink="/guide">Guides</a></li>
          <li><a routerLink="/ui">UI</a></li>
          <li><a routerLink="/examples">Examples</a></li>
        </ul>

        <!-- <p>This site is powered by <a href="https://www.netlify.com/" rel="noopener" target="_blank">Netlify</a>.</p> -->
        <p>
          Maintained by the
          <a href="https://github.com/ngx-formly/ngx-formly#core-team" rel="noopener" target="_blank">core team</a> with
          the help of
          <a href="https://github.com/ngx-formly/ngx-formly/graphs/contributors" rel="noopener" target="_blank"
            >our contributors</a
          >.
        </p>
        <p>
          Code licensed
          <a href="https://github.com/ngx-formly/ngx-formly/blob/main/LICENSE" target="_blank" rel="license noopener"
            >MIT</a
          >.
        </p>

        <div class="bd-footer-badges">
          <a href="https://www.netlify.com" rel="noopener" target="_blank">
            <img
              height="40"
              src="https://www.netlify.com/img/global/badges/netlify-light.svg"
              alt="Deploys by Netlify"
            />
          </a>
        </div>
      </div>
    </footer>
  </mat-sidenav-container>
</ng-container>

<ng-template #routerOutlet>
  <router-outlet></router-outlet>
</ng-template>

<ng-template #version>
  <button mat-button [matMenuTriggerFor]="menu">
    v7
    <mat-icon>arrow_drop_down</mat-icon>
  </button>
  <mat-menu #menu="matMenu" yPosition="below" xPosition="before">
    <a disabled mat-menu-item>v7 (latest)</a>
    <a href="https://v6.formly.dev/" mat-menu-item>v6</a>
    <a href="https://v5.formly.dev/" mat-menu-item>v5</a>
  </mat-menu>
</ng-template>

<ng-template #sideMenuItem let-items="items">
  <ng-container *ngFor="let item of items">
    <a
      mat-button
      [disabled]="item.items"
      [class]="!item.items ? 'menu-subitem' : 'menu-subheader'"
      [routerLink]="!item.items ? item.path : undefined"
      [routerLinkActiveOptions]="{ exact: true }"
      routerLinkActive="active-link"
    >
      {{ item.label }}
    </a>

    <ng-container *ngIf="item.items">
      <ng-template [ngTemplateOutlet]="sideMenuItem" [ngTemplateOutletContext]="{ items: item.items }"> </ng-template>
    </ng-container>
  </ng-container>
</ng-template>
